{template 'header'}
<style type="text/css">
.my-refund-page {
    background-color:rgb(255, 255, 255);
    width:100%;
    height:auto;
    padding-bottom:60px;
}
.my-refund-page .all-order {
    font-size:0.16rem;
}
.my-refund-page .all-order .order-item {
    width:95%;
    margin:20px auto 0px;
    box-shadow:rgba(0, 0, 0, 0.06) 0px 2px 12px 0px;
    border-radius:10px;
    padding:0px 10px;
}
.my-refund-page .all-order .order-item .header {
    height:50px;
    border-bottom:1px solid rgba(238, 238, 238, 0.6);
    line-height:50px;
    position:relative;
}
.my-refund-page .all-order .order-item .header .mp-name {
    color:rgb(74, 74, 74);
    font-weight:bold;
}
.my-refund-page .all-order .order-item .header .order-status {
    font-size:14px;
    position:absolute;
    right:0px;
}
.my-refund-page .all-order .order-item .order-info {
    padding:21px 0px;
    position:relative;
}
.my-refund-page .all-order .order-item .order-info .cover {
    width:0.5rem;
    height:0.5rem;
    border-radius:25px;
    margin:0px 12px 0px 0px;
    background-size:100%;
    background-position:center center;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
.my-refund-page .all-order .order-item .order-info .name {
    font-size:0.17rem;
    color:rgb(74, 74, 74);
    margin-bottom:4px;
    width:80%;
}
.my-refund-page .all-order .order-item .order-info .time {
    font-size:14px;
    color:rgb(155, 155, 155);
}
.my-refund-page .all-order .order-item .order-info .price {
    position:absolute;
    right:0px;
    top:23px;
    font-size:0.17rem;
    color:rgb(74, 74, 74);
    line-height:28px;
}
.my-refund-page .all-order .order-item .can-refund {
    padding-bottom:21px;
}
.my-refund-page .all-order .order-item .can-refund .to-refund {
    width:84px;
    height:30px;
    border-radius:44px;
    border:1px solid rgba(155, 155, 155, 0.38);
    font-size:14px;
    line-height:29px;
    color:rgb(155, 155, 155);
    margin-right:11px;
    background:none;
}
.my-refund-page .all-order .order-item .can-refund .to-refund:active {
    background:rgba(245, 245, 245, 1);
}
.my-refund-page .all-order .order-item .can-refund .to-study {
    width:84px;
    height:30px;
    font-size:14px;
    line-height:30px;
    display:inline-block;
    font-weight:normal;
    -webkit-letter-spacing:0px;
    -moz-letter-spacing:0px;
    -ms-letter-spacing:0px;
    letter-spacing:0px;
    box-shadow:rgba(255, 0, 29, 0.23) 0px 1px 8px 0px;
}
.my-refund-page .all-order .order-item .applied {
    padding-bottom:21px;
}
.my-refund-page .all-order .order-item .applied .cancel-btn {
    width:84px;
    height:30px;
    font-size:14px;
    line-height:30px;
    display:inline-block;
    font-weight:normal;
    -webkit-letter-spacing:0px;
    -moz-letter-spacing:0px;
    -ms-letter-spacing:0px;
    letter-spacing:0px;
    box-shadow:rgba(255, 0, 29, 0.23) 0px 1px 8px 0px;
}
.my-refund-page .no-order {
    text-align:center;
}
.my-refund-page .no-order img {
    width:194px;
    margin:60px auto 44px;
}
.my-refund-page .no-order p {
    color:rgb(74, 74, 74);
    font-size:18px;
    font-weight:bold;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-refund-page .customer-block {
    width:100%;
    height:54px;
    font-size:0.16rem;
    text-align:center;
    position:fixed;
    bottom:0px;
    max-width:480px;
    padding:0px 18px;
}
.my-refund-page .customer-block div {
    width:95px;
    height:32px;
    background-color:rgb(255, 240, 0);
    color:rgb(254, 83, 101);
    line-height:32px;
    border-radius:44px;
}
.my-refund-page .unstart-dialog {
    background-color:rgba(0, 0, 0, 0.4);
    position:fixed;
    top:0px;
    width:100%;
    height:100%;
}
.my-refund-page .unstart-dialog .main-block {
    width:284px;
    height:321px;
    background-color:rgb(255, 255, 255);
    border-radius:6px;
    overflow:auto;
}
.my-refund-page .unstart-dialog .main-block .header {
    height:108px;
    background-color:rgba(254, 148, 111, 0.06);
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-refund-page .unstart-dialog .main-block .header .bg {
    width:80px;
}
.my-refund-page .unstart-dialog .main-block .header .bg img {
    width:100%;
}
.my-refund-page .unstart-dialog .main-block .header .word {
    width:190px;
    color:rgb(254, 83, 101);
    font-size:0.15rem;
    line-height:21px;
}
.my-refund-page .unstart-dialog .main-block .center {
    margin:30px 34px;
    color:rgb(74, 74, 74);
    font-size:0.18rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-refund-page .starting-dialog {
    background-color:rgba(0, 0, 0, 0.4);
    position:fixed;
    top:0px;
    width:100%;
    height:100%;
}
.my-refund-page .starting-dialog .main-block {
    width:284px;
    height:344px;
    background-color:rgb(255, 255, 255);
    border-radius:6px;
    overflow:auto;
}
.my-refund-page .starting-dialog .main-block .header {
    height:172px;
    background-color:rgba(254, 148, 111, 0.06);
    padding:25px 43px;
    line-height:20px;
    font-size:0.16rem;
    color:rgb(74, 74, 74);
}
.my-refund-page .starting-dialog .main-block .header div {
    margin-bottom:13px;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-refund-page .starting-dialog .main-block .header div:last-child {
    margin-bottom:0;
}
.my-refund-page .starting-dialog .main-block .header div img {
    width:20px;
    height:20px;
    margin-right:17px;
}
.my-refund-page .starting-dialog .main-block .header div span {
    color:rgb(254, 83, 101);
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-refund-page .starting-dialog .main-block .word {
    margin:22px 0px;
    color:rgb(74, 74, 74);
    font-size:0.18rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
}
.my-refund-page .no-refund-btn {
    width:217px;
    margin:0px auto;
}
.my-refund-page .refund-btn {
    margin-top:12px;
    text-align:center;
    color:rgb(254, 83, 101);
    font-size:18px;
}
.my-refund-page .reason_page {
    position:fixed;
    top:0px;
    width:100%;
    height:100vh;
    padding:0px 0.25rem;
}
.my-refund-page .reason_page p {
    font-size:0.2rem;
    margin:0.3rem 0px 0.2rem;
    text-align:center;
}
.my-refund-page .reason_page .other-reason {
    width:80%;
    height:1.2rem;
    background-color:rgb(255, 255, 255);
    border-radius:6px;
    border:none;
    padding:10px;
    font-size:0.16rem;
    color:rgb(151, 151, 151);
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-refund-page .reason_page .retain-btn {
    width:290px;
    margin:20px auto 0px;
}
.my-refund-page .reason_page .confirm-refund-btn {
    margin:6px auto 0px;
    text-align:center;
    color:rgb(155, 155, 155);
    font-size:18px;
    width:290px;
    height:44px;
    border:1px solid rgb(210, 210, 210);
    border-radius:44px;
    line-height:44px;
}
.my-refund-page .apply-success-dialog img {
    width:158px;
}
.my-refund-page .apply-success-dialog .word {
    font-size:18px;
    color:rgb(74, 74, 74);
    font-weight:500;
    margin:8px 0px;
}
.my-refund-page .apply-success-dialog .tip {
    font-size:16px;
    color:rgb(155, 155, 155);
}
.my-refund-page textarea::-webkit-input-placeholder {
    color:#979797b5 !important;
}
    </style>
    <div class="my-refund-page">
        <div class="all-order">
        </div>
        {if !empty($cfg['adv']['order_url'])}
        <div class="g-main-bg g-flex row-between col-center customer-block">
            <p>{$cfg['adv']['order_left']}</p>
            <div>{$cfg['adv']['order_right']}</div>
        </div>
        {/if}
        <div class="" style="display: none;">
            <div class="g-flex col-center row-center unstart-dialog">
                <div class="main-block">
                    <div class="g-flex header">
                        <div class="bg">
                            <img src="{RES}img/custom.png">
                        </div>
                        <div class="word">老师正在为大家分班 和准备学习资料，下周一就可以听课了哦～</div>
                    </div>
                    <div class="center">你购买的课程还没开课哦 确定要退款吗?</div>
                    <button class="g-button no-refund-btn">暂不退款</button>
                    <p class="refund-btn">或继续退款</p>
                </div>
            </div>
        </div>
        <div class="" style="display: none;">
            <div class="g-flex col-center row-center starting-dialog">
                <div class="main-block">
                    <div class="header">
                        <div class="g-flex">
                            <img src="{RES}img/minute.png">你已经学习了<span>17</span>分钟</div>
                        <div class="g-flex">
                            <img src="{RES}img/student.png">超过同期<span>72%</span>的同学</div>
                        <div class="g-flex">
                            <img src="{RES}img/days.png">再坚持学习<span>69</span>天</div>
                        <div class="g-flex">
                            <img src="{RES}img/awards.png">就可以领取奖学金了</div>
                    </div>
                    <div class="word">你确定要半途而废吗？</div>
                    <button class="g-button no-refund-btn">暂不退款</button>
                    <p class="refund-btn">或继续退款</p>
                </div>
            </div>
        </div>
        <div id="refund-des" class="" style="display: none;">
            <div class="g-page reason_page">
                <p>请选择退款理由（必选一项）</p>
                <div class="options">
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="not_like">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div id="not_like">内容不喜欢</div>
                        </div>
                    </div>
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="no_time">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div id="no_time">暂时没有时间，过段时间再来学习</div>
                        </div>
                    </div>
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="cant_wait">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div id="cant_wait">开课时间太晚，等不及了</div>
                        </div>
                    </div>
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="not_how_listen">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div id="not_how_listen">不知道怎么操作才能听课</div>
                        </div>
                    </div>
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="not_how_signin">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div id="not_how_signin">不知道如何打卡</div>
                        </div>
                    </div>
                    <div onclick="selReason(this)" class="g-radio-option g-push g-flex" value="other">
                        <div class="radio"></div>
                        <div style="font-size: 0.18rem; color: rgb(151, 151, 151); width: 100%;">
                            <div>其他:</div>
                            <textarea id="other" class="other-reason" placeholder="其他退款理由"></textarea>
                        </div>
                    </div>
                </div>
                <button onclick="hideRefund()" class="g-button retain-btn">再考虑下</button>
                <p onclick="doRefund()" class="confirm-refund-btn">确认退款</p>
            </div>
        </div>
        <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">请填写退款理由(必填)</div>
        <div class="g-modal g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body apply-success-dialog">
                        <img src="{RES}img/Bitmap.png">
                        <p class="word">退款申请提交成功</p>
                        <p class="tip">我们将在48小时内处理你的 退款申请，请耐心等待……</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn" href="javascript:;">我知道了</a>
                </div>
            </div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body">
                        <p>欢迎你的回归</p>
                        <p>让我们彼此有了一起学习的机会</p>
                        <p>赶快加入学习吧</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">继续学习</a>
                </div>
            </div>
        </div>
    </div>
</div>
{template 'loading'}
<script>
var page = 1;
//下拉加载
var range = -80; //距下边界长度/单位px
var totalheight = 0;
var loading = false;
$(window).scroll(function(){
	if(loading) return false;
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
totalheight = parseFloat($('body').height()) + parseFloat(srollPos);
if(($("body").height()-range) <= totalheight) {
	if(loading) return false;
	page++;
	getList();
}            
});
function getList(){
	if(loading) return false;
	loading = true;
	$.ajax({
		url:'{php echo $this->murl("refund")}',
		data: {page:page, op:'scroll'},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			console.log(dat)
			if(dat.code==1){
				dat = dat.list;
				var str = '';
				for(var i in dat){
					
		        	str += '<div class="order-item">';
		        	str += '<div class="header"><span class="mp-name">{$cfg["title"]}</span><span class="order-status" style="color: rgb(254, 83, 100);">'+dat[i].status_str+'</span>';
		        	str += '</div>';
		        	str += '<div class="g-flex col-center order-info">';
		        	str += '<div class="cover" style="background-image: url('+dat[i].thumb+');"></div>';
		        	str += '<div>';
		        	str += '<p class="g-text-cut name">'+dat[i].title+'</p>';
		        	str += '<p class="time">购于：'+dat[i].createtime+'</p>';
		        	str += '</div><span class="price">¥'+dat[i].price+'</span>';
		        	str += '</div>';
		        	str += '<div class="g-flex row-end can-refund">';
		        	if(dat[i].status==4)str += '<button onclick="cancelRefund('+dat[i].id+')" class="g-button to-study">取消退款</button>';
		        	if(dat[i].can_refund==1)str += '<button onclick="goRefund('+dat[i].id+')" class="to-refund">退款</button>';
		        	if(dat[i].can_back==1)str += '<button onclick="goApply('+dat[i].id+')" class="to-refund">申请返还</button>';
		        	if(dat[i].status!=4 && dat[i].status!=5 && dat[i].status!=6 && dat[i].status!=0)str += '<button onclick="golisten('+dat[i].bmid+')" class="g-button to-study">进入听课</button>';
		        	str += '</div>';
		        	str += '</div>';
					
				}
				$('.all-order').append(str);
				loading = false;
			}
			else{
				if(page==1) console.log('暂无评论')
				loading = true;
			}
		}	
	});	
}
var rfund_id = 0;
function goRefund(id){
	rfund_id = id;
	$('#refund-des').show()
}
function hideRefund(){
	rfund_id = 0;
	$('#refund-des').hide()
}
var reason_value = '';
function selReason(obj){
	$('.g-radio-option').removeClass('active');
	$(obj).addClass('active');
	reason_value = $(obj).attr('value');
}
var isSubmit = false;
function goApply(id){
	if(isSubmit) return false;
	isSubmit = true;
	$.ajax({
		url:'{php echo $this->murl("refund")}',
		data: {id:id, op:'back'},
		type: "post",
		success: function(dat){
			isSubmit = false;	
			dat = JSON.parse(dat);
			msgTip(dat.msg,function(){
				location.href='{php echo $this->murl("refund")}'
			})
			
		}
	});
}

function doRefund(){
	if(reason_value == ''){
		msgTip('请选择退款理由')
		return false;
	}
	if(reason_value == 'other') var content = $('#'+reason_value).val();
	else var content = $('#'+reason_value).text();
	if(!content || content == ''){
		msgTip('请选择退款理由')
		return false;
	}
	if(isSubmit) return false;
	isSubmit = true;
	$.ajax({
		url:'{php echo $this->murl("refund")}',
		data: {id:rfund_id,content: content, op:'refund'},
		type: "post",
		success: function(dat){
			isSubmit = false;	
			dat = JSON.parse(dat);
			msgTip(dat.msg,function(){
				location.href='{php echo $this->murl("refund")}'
			})
			
		}
	});
}
function cancelRefund(id){
	if(isSubmit) return false;
	isSubmit = true;
	$.ajax({
		url:'{php echo $this->murl("refund")}',
		data: {id:id, op:'cancel'},
		type: "post",
		success: function(dat){
			isSubmit = false;	
			dat = JSON.parse(dat);
			msgTip(dat.msg,function(){
				location.href='{php echo $this->murl("refund")}'
			})
		}
	});
	
}
function golisten(id){
	setCookie('mem_book',id);
	location.href='{php echo $this->murl("blisten")}'
}
$(function(){
	getList();
})
</script>

</body></html>